/*
 * @description: 与pinia连用
 * @Author: Islands
 * @Date: 2024-06-19 21:21:18
 * @LastEditTime: 2024-06-21 16:57:02
 */

import { ref } from 'vue';
import { storeToRefs } from "pinia";
import { configStore } from '@/plugins/pinia/index';
import { pickerOption, predefineColors, bgImageOptions, animeOptions, animeConstant, component } from '@/constant/theme';
import { toRgba } from '@/utils/index'

/**
*  主题切换
*  @param {Number} theme 布局标记
*  @activeChange {Function} 切换操作
*  @example
*/
export function useTheme() {
    const { Widgets } = storeToRefs(configStore())
    const theme: any = ref(Widgets.value.layout);
    const activeChange = (val: any) => {
        Widgets.value.layout = val;
        return;
    };
    return {
        theme,
        component,
        activeChange,
    };
}
// =============== 背景图切换 start ===============
/**
*  背景图切换
*  @param {Number} value 切换标记
*  @selectChange {Function}  切换操作
*  @example
*/
export function useBgImage() {
    const { Widgets } = storeToRefs(configStore());
    const value: any = ref(Widgets.value.bgImage);
    const selectChange = (val: any) => {
        Widgets.value.bgImage = val
        return;
    };
    return {
        bgImageOptions,
        value,
        selectChange,
    };
}
// =============== 背景图切换 end ===============

// =============== 取色器钩子 start ===============
/**
*  取色器钩子
*  @param {Number} color 颜色值
*  @pickerChange {Function}  取色回调
*  @example
*/

import {forElColor,forElColorHover} from '@/constant/theme'
export function usePicker() {
    const { Widgets } = storeToRefs(configStore());
    const color = ref(Widgets.value.color);
    const pickerChange = (val: number, el: string, evn: any) => {
        color.value[val] = evn;
        let rgbaColor = toRgba(evn);
        forElColor(el).forEach(item => {
            document.documentElement.style.setProperty(item, rgbaColor)
        });
        forElColorHover(el).forEach(item => {
            document.documentElement.style.setProperty(item, toRgba(evn,0.2))
        });
        return;
    };
    return {
        color,
        pickerOption,
        predefineColors,
        pickerChange
    };
}

// =============== 取色器钩子 end ===============


// =============== 页面动画 start ===============
/**
*  页面动画
*  @param {Number} value 切换标记
*  @activeChange {Function}  切换操作
*  @example
*/
export function useAnime() {
    const { Widgets } = storeToRefs(configStore())
    const value: any = ref(Widgets.value.anime);
    const selectChange = (val: any, evn: any) => {
        Widgets.value.anime[val] = evn
    };
    return {
        animeConstant,
        animeOptions,
        value,
        selectChange,
    };
}

// =============== 页面动画 end ===============

export function useConfig() {
    const { Widgets } = storeToRefs(configStore());
    const tabsHideChange = (val: any) => {
        Widgets.value.tab.hide = val;
    }
    const tabsHeightChange = (val: any) => {
        Widgets.value.tab.height = val;
    }
    const asideWidthChange = (val: any) => {
        Widgets.value.asideWidth = val;
    }
    const headerHeightChange = (val: any) => {
        Widgets.value.headerHeight = val;
    }
    const footerHideChange = (val: any) => {
        Widgets.value.footer.hide = val;
    }
    return {
        Widgets,
        tabsHideChange,
        tabsHeightChange,
        asideWidthChange,
        headerHeightChange,
        footerHideChange
    }
}